﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ButtonGroupsModel
@{
    ViewData["Title"] = "ButtonGroups";
}

<h2>Button groups</h2>

<p>Based on <a href="@BootstrapUrlHelper.GetDocUrl("components/button-group")" target="_blank"> Bootstrap Button group</a>.</p>

<h4>Basic example</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-button-group>
            <abp-button button-type="Secondary">Left</abp-button>
            <abp-button button-type="Secondary">Middle</abp-button>
            <abp-button button-type="Secondary">Right</abp-button>
        </abp-button-group>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button-group&gt;
    &lt;abp-button button-type=&quot;Secondary&quot;&gt;Left&lt;/abp-button&gt;
    &lt;abp-button button-type=&quot;Secondary&quot;&gt;Middle&lt;/abp-button&gt;
    &lt;abp-button button-type=&quot;Secondary&quot;&gt;Right&lt;/abp-button&gt;
&lt;/abp-button-group&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Left&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Middle&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Right&lt;/button&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Button toolbar</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-button-toolbar>
            <abp-button-group class="me-2">
                <abp-button button-type="Secondary">1</abp-button>
                <abp-button button-type="Secondary">2</abp-button>
                <abp-button button-type="Secondary">3</abp-button>
                <abp-button button-type="Secondary">4</abp-button>
            </abp-button-group>
            <abp-button-group class="me-2">
                <abp-button button-type="Secondary">5</abp-button>
                <abp-button button-type="Secondary">6</abp-button>
                <abp-button button-type="Secondary">7</abp-button>
            </abp-button-group>
            <abp-button-group>
                <abp-button button-type="Secondary">8</abp-button>
            </abp-button-group>
        </abp-button-toolbar>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
        &lt;abp-button-toolbar&gt;
            &lt;abp-button-group class=&quot;mr-2&quot;&gt;
                &lt;abp-button button-type=&quot;Secondary&quot;&gt;1&lt;/abp-button&gt;
                &lt;abp-button button-type=&quot;Secondary&quot;&gt;2&lt;/abp-button&gt;
                &lt;abp-button button-type=&quot;Secondary&quot;&gt;3&lt;/abp-button&gt;
                &lt;abp-button button-type=&quot;Secondary&quot;&gt;4&lt;/abp-button&gt;
            &lt;/abp-button-group&gt;
            &lt;abp-button-group class=&quot;mr-2&quot;&gt;
                &lt;abp-button button-type=&quot;Secondary&quot;&gt;5&lt;/abp-button&gt;
                &lt;abp-button button-type=&quot;Secondary&quot;&gt;6&lt;/abp-button&gt;
                &lt;abp-button button-type=&quot;Secondary&quot;&gt;7&lt;/abp-button&gt;
            &lt;/abp-button-group&gt;
            &lt;abp-button-group&gt;
                &lt;abp-button button-type=&quot;Secondary&quot;&gt;8&lt;/abp-button&gt;
            &lt;/abp-button-group&gt;
        &lt;/abp-button-toolbar&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-toolbar&quot; role=&quot;toolbar&quot;&gt;
  &lt;div class=&quot;btn-group me-2&quot; role=&quot;group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;1&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;2&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;3&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;4&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&quot;btn-group me-2&quot; role=&quot;group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;5&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;6&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;7&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;8&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Sizing</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-button-group size="Large">
            <abp-button button-type="Secondary">Left</abp-button>
            <abp-button button-type="Secondary">Middle</abp-button>
            <abp-button button-type="Secondary">Right</abp-button>
        </abp-button-group>
        <br><br>
        <abp-button-group>
            <abp-button button-type="Secondary">Left</abp-button>
            <abp-button button-type="Secondary">Middle</abp-button>
            <abp-button button-type="Secondary">Right</abp-button>
        </abp-button-group>
        <br><br>
        <abp-button-group size="Small">
            <abp-button button-type="Secondary">Left</abp-button>
            <abp-button button-type="Secondary">Middle</abp-button>
            <abp-button button-type="Secondary">Right</abp-button>
        </abp-button-group>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button-group size=&quot;Large&quot;&gt;
    ...
&lt;/abp-button-group&gt;

&lt;abp-button-group&gt;
    ...
&lt;/abp-button-group&gt;

&lt;abp-button-group size=&quot;Small&quot;&gt;
    ...
&lt;/abp-button-group&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-group btn-group-lg&quot; role=&quot;group&quot;&gt;
    ...
&lt;/div&gt;

&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
    ...
&lt;/div&gt;

&lt;div class=&quot;btn-group btn-group-sm&quot; role=&quot;group&quot;&gt;
    ...
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Nesting</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-button-group>
            <abp-button button-type="Secondary">1</abp-button>
            <abp-button button-type="Secondary">2</abp-button>
            <abp-dropdown>
                <abp-dropdown-button button-type="Secondary" text="Dropdown" />
                <abp-dropdown-menu>
                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
                </abp-dropdown-menu>
            </abp-dropdown>
        </abp-button-group>
        </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button-group&gt;
    &lt;abp-button button-type=&quot;Secondary&quot;&gt;1&lt;/abp-button&gt;
    &lt;abp-button button-type=&quot;Secondary&quot;&gt;2&lt;/abp-button&gt;
    &lt;abp-dropdown&gt;
        &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown&quot; /&gt;
        &lt;abp-dropdown-menu&gt;
            &lt;abp-dropdown-item href=&quot;#&quot;&gt; Dropdown link &lt;/abp-dropdown-item&gt;
            &lt;abp-dropdown-item href=&quot;#&quot;&gt; Dropdown link &lt;/abp-dropdown-item&gt;
        &lt;/abp-dropdown-menu&gt;
    &lt;/abp-dropdown&gt;
&lt;/abp-button-group&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group with nested dropdown&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;1&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;2&lt;/button&gt;

  &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
    &lt;button id=&quot;btnGroupDrop1&quot; type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
      Dropdown
    &lt;/button&gt;
    &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;btnGroupDrop1&quot;&gt;
      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Dropdown link&lt;/a&gt;
      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Dropdown link&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Vertical variation</h4>

<div class="demo-with-code">
    <div class="demo-area text-center">
        <abp-button-group direction="Vertical">
            <abp-button button-type="Secondary">button</abp-button>
            <abp-button button-type="Secondary">button</abp-button>
            <abp-dropdown direction="Right">
                <abp-dropdown-button button-type="Secondary" text="Dropdown" />
                <abp-dropdown-menu>
                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
                </abp-dropdown-menu>
            </abp-dropdown>
            <abp-button button-type="Secondary">button</abp-button>
            <abp-button button-type="Secondary">button</abp-button>
            <abp-dropdown direction="Left">
                <abp-dropdown-button button-type="Secondary" text="Dropdown" />
                <abp-dropdown-menu>
                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
                    <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
                </abp-dropdown-menu>
            </abp-dropdown>
            <abp-button button-type="Secondary">button</abp-button>
        </abp-button-group>
        </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button-group direction=&quot;Vertical&quot;&gt;
    ...
&lt;/abp-button-group&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-group-vertical&quot;&gt;
  ...
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>